<template>
  <div class="dialog">
    <el-dialog
      :title="dialogVisible.title"
      :visible.sync="dialogVisible.show"
      width="30%"
      :close-on-click-modal="false"
      :before-close="handleClose"
    >
      <div class="from">
        <el-form
          ref="form"
          :model="formData"
          :rules="from_rules"
          label-width="120px"
          style="margin: 10px; width: auto"
        >
          <el-form-item label="收支类型:">
            <el-select v-model="formData.type" placeholder="收支类型">
              <el-option
                v-for="(formtype, index) in formmat_type_list"
                :key="index"
                :label="formtype"
                :value="formtype"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="收支描述:" prop="describes">
            <el-input v-model="formData.describes"></el-input>
          </el-form-item>
          <el-form-item label="收入:" prop="icome">
            <el-input v-model="formData.icome"></el-input>
          </el-form-item>
          <el-form-item label="支出:" prop="expend">
            <el-input v-model="formData.expend"></el-input>
          </el-form-item>
          <el-form-item label="账户现金:" prop="crash">
            <el-input v-model="formData.crash" :value="getresult"></el-input>
          </el-form-item>
          <el-form-item label="备注:" prop="remark">
            <el-input type="textarea" v-model="formData.remark"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('form')"
              >提交</el-button
            >
            <el-button @click="resetForm('form')">重置</el-button>
            <el-button @click="dialogVisible.show = false">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Dialog",
  created() {},
  data() {
    return {
      formmat_type_list: [
        "提现",
        "优惠券",
        "银行卡支付",
        "拉客活动",
        "新用户奖励",
        "转账",
      ],
      from_rules: {
        describes: [
          { required: true, message: "请输入收支描述", trigger: "blur" },
          {
            min: 5,
            max: 40,
            message: "长度在 5 到 40 个字符",
            trigger: "blur",
          },
        ],
        icome: [
          {
            required: true,
            message: "请输入收入",
            trigger: "blur",
          },
        ],
        expend: [
          {
            required: true,
            message: "请输入支出",
            trigger: "blur",
          },
        ],
        crash: [
          {
            required: true,
            message: "请输入账户现金",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    handleClose() {
      this.dialogVisible.show = false;
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.dialogVisible.option);
          const url =
            this.dialogVisible.option == "add"
              ? "add"
              : `edit/${this.formData.id}`;
          this.$axios
            .post(`/api/profile/${url}`, this.formData)
            .then((res) => {
              if (res.data.code == 1) {
                //添加成功
                this.$message({
                  message: `${res.data.msg}`,
                  type: "success",
                });
                this.dialogVisible.show = false;
                //自定义事件，让表单重新刷新
                this.$emit("update");
              } else {
                //添加失败
                this.$message({
                  message: `${res.data.msg}`,
                  type: "warning",
                });
              }
            })
            .catch((err) => {
              console.log(err.message);
            });
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  computed: {
    getresult() {
      return this.formData.icome - this.formData.expend > 0
        ? this.formData.icome - this.formData.expend
        : 0;
    },
  },
  props: {
    dialogVisible: Object,
    formData: Object,
  },
};
</script>

<style>
</style>